<template>
  <div class="chart-wrapper" ref="scatterMap"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, reactive, watch } from "vue";
import { debounce, getGeoJson } from "@/utils/index.js";
import useResize from "@/componentApi/useResize.js";
import { selectCityData } from "@/api/chart";

export default {
  name: "scatterMap",
  setup() {
    let { abcode, year, parentInfo, setCommitSum } = useResize();

    let myChart = ref(null); //图表注册
    let geoJson = ref(null); // 地图数据
    const scatterMap = ref(null);
    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getMapJson();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //通过高德获取geoJson数据
    const getMapJson = async () => {
      geoJson.value = await getGeoJson(abcode.value, geoJson.value);
      getMapData();
    };

    //模拟接口，获取echarts数据
    const getMapData = async () => {
      let { data } = await selectCityData({
        abcode: abcode.value,
        year: year.value,
      });
      let sum = data.reduce((t, c) => t + parseFloat(c.value), 0);
      setCommitSum(parseFloat(sum.toFixed(1)));

      data = data.sort(function (a, b) {
        return a.value - b.value;
      });
      initEcharts(data);
    };
    //渲染echarts图
    const initEcharts = (data) => {
      myChart = echarts.init(scatterMap.value || scatterMap);
      echarts.registerMap("china1", geoJson.value); //注册
      // let labelData = [
      //   {
      //     name: "白云区",
      //     value: [113.2563, 23.2269],
      //   },
      // ];

      myChart.setOption(
        {
          baseOption: {
            toolbox: {
              feature: {
                restore: {
                  show: false,
                },
                dataView: {
                  show: false,
                },
                dataZoom: {
                  show: false,
                },
                magicType: {
                  show: false,
                },
              },
              iconStyle: {
                normal: {
                  borderColor: "#1990DA",
                },
              },
              top: 0,
              right: 0,
            },
            series: [
              {
                type: "map",
                map: "china1",
                roam: true,
                zoom: 1, //地图大小
                label: {
                  offset: [30, 40],
                  //标签配置项
                  normal: {
                    show: true,
                    color: "rgb(249, 249, 249)", //省份标签字体颜色
                  },
                  emphasis: {
                    show: true,
                    color: "#f75a00",
                  },
                },
                itemStyle: {
                  normal: {
                    areaColor: "#24CFF4",
                    borderColor: "#53D9FF",
                    borderWidth: 1.3,
                    shadowBlur: 15,
                    shadowColor: "rgb(58,115,192)",
                    shadowOffsetX: 7,
                    shadowOffsetY: 6,
                  },
                  emphasis: {
                    areaColor: "#8dd7fc",
                    borderWidth: 1.6,
                    shadowBlur: 25,
                  },
                },
              },
            ],
          },
        },
        true
      );
    };

    watch();

    return {
      scatterMap,
      myChart,
      parentInfo,
    };
  },
};
</script>
